<template>
  <div class="log-module">
    <div class="log-header">
      <font-awesome-icon
          :icon="['fas', 'clipboard']"
      /> 日志
    </div>
    <div class="log-container">
      <div
          class="log-wrapper"
          v-for="(log, index) in logs"
          :key="index"
      >
        <!-- 使用格式化后的时间 -->
        <div class="log-time">{{ formatTime(log.time) }}</div>
        <div class="log-content">
          <span
              class="scroll-text"
              :class="{ 'animate-scroll': shouldAnimate(log.content) }"
          >
            {{ log.content }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { log } from "@/utils/log";

export default {
  name: "Log",
  data() {
    return {
      logs: [], // 初始化为空数组
      logContainerWidth: 0 // 存储日志容器宽度
    };
  },
  mounted() {
    this.logs = log.getLogs();
    console.log('获取到的日志数据:', this.logs); // 打印日志数据，确认是否正确获取
    // 组件挂载完成后获取容器宽度
    this.$nextTick(() => {
      this.updateLogContainerWidth();
      // 监听窗口大小变化
      window.addEventListener('resize', this.updateLogContainerWidth);
    });
  },
  beforeUnmount() {
    // 移除窗口大小变化监听
    window.removeEventListener('resize', this.updateLogContainerWidth);
  },
  methods: {
    /* 新增：把时间戳 → hh:mm:ss */
    formatTime(ts) {
      const date = new Date(ts);
      const hh = String(date.getHours()).padStart(2, '0');
      const mm = String(date.getMinutes()).padStart(2, '0');
      const ss = String(date.getSeconds()).padStart(2, '0');
      return `${hh}:${mm}:${ss}`;
    },
    // 判断内容是否需要滚动
    shouldAnimate(content) {
      if (this.logContainerWidth === 0) return false;
      const tempSpan = document.createElement('span');
      tempSpan.style.position = 'absolute';
      tempSpan.style.whiteSpace = 'nowrap';
      tempSpan.style.visibility = 'hidden';
      tempSpan.textContent = content;
      document.body.appendChild(tempSpan);
      const textWidth = tempSpan.offsetWidth;
      document.body.removeChild(tempSpan);
      return textWidth > this.logContainerWidth;
    },
    // 更新日志容器宽度
    updateLogContainerWidth() {
      const logContent = this.$el.querySelector('.log-content');
      if (logContent) {
        this.logContainerWidth = logContent.offsetWidth * 0.8;
      }
    }
  },
};
</script>

<style scoped>
/* 样式保持原样，无需改动 */
.log-module {
  padding: 1rem 0.6vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.log-header {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 0.6rem;
}

.log-container {
  flex: 1 1 0;
  overflow: auto;
}

.log-wrapper {
  margin: 0.3rem 0;
  padding: 0.4rem 0.5vw;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 0.4rem;
  font-size: 0.9rem;
  display: flex;          /* 一行排布 */
  min-width: 0;
}

.log-time {
  flex-shrink: 0; /* 防止.log-time收缩 */
  margin-right: 0.5rem; /* 增加.log-time和.log-content之间的间距 */
}

.log-content {
  flex: 1;
  overflow: hidden;
  position: relative;
  color: #ccc;
}

.scroll-text {
  white-space: nowrap;
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  transition: transform 0s;
}

.animate-scroll {
  animation: scrollText 20s linear infinite;
}

@keyframes scrollText {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% + 100% / 3));
  }
}
</style>